<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部文物</title>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style2.css">
    <link rel="stylesheet" href="./ruoyi/css/ry-ui.css">
    <link href="./css/style.css?v=20200903" rel="stylesheet"/>
    <link href="./ruoyi/css/ry-ui.css?v=4.6.0" rel="stylesheet"/>
    <style>
        .left-panel {
            width: 150px;
            float: left;
            background: #f7f7f7;
        }


        .left-panel ul {
            padding-inline-start: 0;
        }

        .left-panel ul li {
            list-style: none;
            padding: 20px 0;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .left-panel ul li:hover {
            cursor: pointer;
        }

        .left-panel ul li.active {
            color: #3ab493;
            background: #ffffff;
        }

        .row {
            width: calc(100% - 150px);
            float: left;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }

        @media screen and (min-width: 992px) {
            .col-md-2 {
                width: 14.2%;
            }
        }

        @media screen and (max-width: 1081px) {
            .left-panel {
                width: 200px;
            }

            .row {
                width: calc(100% - 200px);
            }

            .left-panel ul li {
                padding: 40px 0;
            }
        }

        .item-image {
            width: 100%;
            min-height: 100px;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
        }

        .image-wrapper {
            width: 100%;
            height: 0;
            padding-bottom: 108.5%;
            position: relative;
        }

        .item {
            text-align: center;
            margin: 20px 0;
        }

        .item:hover {
            cursor: pointer;
        }

        .select-list li label {
            width: 200px !important;
        }

        .select-list li input {
            width: 1100px;
            border-radius: 40px;
            height: 40px;
            padding-left: 20px;
        }

        .select-list ul li a {
            font-size: 16px;
            height: 40px;
            padding: 6px 10px;
            border-radius: 10px;
        }

        .select-list li input::-ms-input-placeholder {
            text-align: center
        }

        .select-list li input::-webkit-input-placeholder {
            text-align: center
        }

        .search {
            margin-top: 20px;
            height: 80px;
            width: 100%;
        }

        .container-div {
            width: 1239px;
            margin: 0 auto;
            padding: 0;
        }

        @media screen and (max-width: 1081px) {
            .container-div {
                font-size: 3vw !important;
                width: 100%;
            }

            .select-list li input, .select-list li select {
                height: 8vw;
                padding-left: 40px;
            }

            .btn-group-sm > .btn, .btn-sm {
                font-size: 4vw;
                padding: 0.5vw 1.5vw;
                line-height: 1.5;
                border-radius: 1vw;
            }
            .select-list ul li input {
                width: 97vw;
            }
            .select-list ul li a {
                display: none;
            }
        }

        .exhibit-name {
            word-break: break-all;
            display: inline-block;
            /* max-width: 80%; */
            min-height: 6em;
        }


        html, body, .container-div {
            height: 100%;
        }

        .container-div .left-panel, .container-div .row {
            height: calc(100% - 100px);
        }

        .page-wrapper {
            position: absolute;
            padding: 0 20px;
            bottom: 20px;
            width: 100%;
        }


    </style>
</head>
<body>
<div class="container-div">
    <div class="col-sm-12 search">
        <form id="formId">
            <div class="select-list">
                <ul>
                    <li>
                        <input type="text" name="name" id="name" placeholder="搜索文物"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm btn-search"><i
                                class="fa fa-search"></i>&nbsp;搜 索&nbsp;</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="left-panel">
        <ul>
            <li class="active" data-id="">所有分类</li>
        </ul>
    </div>
    <div class="row">
        <div class="col-sm-12 item-container">

        </div>
        <div class="page-wrapper">
            <nav aria-label="...">
                <ul class="pager">
                    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> 前一页</a></li>
                    <li class="next"><a href="#">后一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
    </div>

</div>
<script>
  let page = 1;
  let totalPage = 1;

  function getList(data, typeId) {
    data.pageSize = 16
    data.pageNum = page
    if (typeId) {
      data.typeId = typeId
    }
    $.ajax({
      url: '/api/museum/exhibit/list',
      method: 'post',
      data: data,
      success: function (res) {
        let $itemContainer = $('.item-container');
        $itemContainer.empty()
        console.log(res)
        for (const exhibit of res.rows) {
          $itemContainer.append(
            '<div class="col-sm-3 col-md-2 item" onClick="window.location.href=\'./detail.html?id=' + exhibit.id + '\'">\n' +
                '<div class="image-wrapper">' +
            '              <img class="item-image" src="' + exhibit.img + '" alt="' + exhibit.name + '">\n' +
            '</div>' +
            '                <span style="color:#C5C2C2" class="exhibit-name">' + exhibit.name + '</span>\n' +

            '            </div> '
          )
        }
        totalPage = Math.floor((res.total - 1) / data.pageSize) + 1
        if (page >= totalPage) {
          $('.next').addClass('disabled')
        } else {
          $('.next').removeClass('disabled')
        }
      }
    })
  }

  function search() {
    console.log('search')
    const data = {name: $("#name").val()}
    const typeId = $('.left-panel ul li.active').data('id')
    getList(data, typeId)
  }

  function getQueryVariable(variable) {
    const query = window.location.search.substring(1);
    const vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
      const pair = vars[i].split("=");
      if (pair[0] === variable) {
        return pair[1];
      }
    }
    return false;
  }


  $(function () {
    console.log('onLoad')
    let data = {}
    let name = getQueryVariable("name")
    if (name) {
      data.name = decodeURI(name)
    }
    console.log(data)
    getList(data);

    $.ajax({
      url: '/api/museum/type/list',
      method: 'post',
      data: {},
      success: function (res) {
        let $itemContainer = $('.left-panel ul');
        for (const type of res.rows) {
          $itemContainer.append(
            `<li data-id="${type.id}">${type.name}</li>`
          )
        }
      }
    })

    $('.left-panel ul').on('click', 'li', function () {
      $(this).addClass('active').siblings().removeClass('active')
      const data = {name: $("#name").val()}
      let typeId = $(this).data('id');
      getList(data, typeId)
    })

    $('.btn-search').click(function () {
      search()
    })

    $('#formId').submit(function () {
      search()
      return false
    })

    $('.previous a').click(function () {
      if (page > 1) {
        page--

        if (page <= 1) {
          $('.previous').addClass('disabled')
        } else {
          $('.previous').removeClass('disabled')
        }
        if (page >= totalPage) {
          $('.next').addClass('disabled')
        } else {
          $('.next').removeClass('disabled')
        }
        search()
      }
    })

    $('.next a').click(function () {
      if (page < totalPage) {
        page++
        if (page <= 1) {
          $('.previous').addClass('disabled')
        } else {
          $('.previous').removeClass('disabled')
        }
        if (page >= totalPage) {
          $('.next').addClass('disabled')
        } else {
          $('.next').removeClass('disabled')
        }
        search()
      }
    })
  })
</script>
</body>
</html>